<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="lzy">
    <title>lzy-</title>
    <script src="jquery-3.1.1.js"></script>
    <style>
        main{
            background-color: #eee;
            width: 205px;
            margin: 0 auto;
            border: 1px solid gray;
        }
        main h1{
            text-align: center;
            padding: 0;
            margin: 0;
            height: 30px;
            font-size: 18px;
        }
        main .pic {
            width: 205px;
            height: 160px;
            box-sizing: border-box;
            position: relative;
            background-color: white;
            text-align: center;
            overflow: hidden;
        }
        main .pic img{
            width: 205px;
            height: 160px;
            position: absolute;
            box-sizing: border-box;
            left: 0px;
            padding: 10px;
            padding-bottom: 0px;
        }
        main .pic .right{
            left: 205px;
        }
        main .pic p{
            display: inline-block;
            width: 185px;
            height: 25px;
            line-height: 25px;
            font-size: 14px;
            position:absolute;
            bottom: 0;
            margin: 0;
            padding: 0;
            background-color: mediumvioletred;
            color: white;
            left: 10px;
        }
        main .pic .bottom{
            bottom:-25px;
        }
        #green p{
            background-color: green;
        }
        #blue p{
            background-color: deepskyblue;
        }
    </style>
</head>
<body>
    <main>
        <h1>专辑推荐</h1>
        <div class="pic">
            <img src="images/1_1.jpg" alt="" class="left">
            <img src="images/1_2.jpg" alt="" class="right">
            <p class="top">COCOON/可可尼</p>
            <p class="bottom">几何为网/极致灿烂</p>
        </div>
        <div class="pic" id="green">
            <img src="images/2_1.jpg" alt="" class="left">
            <img src="images/2_2.jpg" alt="" class="right">
            <p class="top">INSUN/恩裳</p>
            <p class="bottom">2013春印象</p>
        </div>
        <div class="pic" id="blue">
            <img src="images/3_1.jpg" alt="" class="left">
            <img src="images/3_2.jpg" alt="" class="right">
            <p class="top">JNBY/江南布衣</p>
            <p class="bottom">NANMENG/南梦</p>
        </div>                
    </main>
</body>
</html>
<script>
$('div').each(function(){
    $(this).hover(function(){
        $(this).find('img.left').stop().animate({
            left:-205
        },500)
        $(this).find('img.right').stop().animate({
            left:0
        },500)
        $(this).find('p.top').stop().animate({
            bottom:-25
        },500)
        $(this).find('p.bottom').stop().animate({
            bottom:0
        })
    },function(){
        $(this).find('img.left').stop().animate({
            left:0
        },500)
        $(this).find('img.right').stop().animate({
            left:205
        },500) 
        $(this).find('p.top').stop().animate({
            bottom:0
        },500)
        $(this).find('p.bottom').stop().animate({
            bottom:-25
        })        

    })        
})
    
    

</script>